<template>
	<view class="card" @click="getInfo">
		<image :src="info.imgUrl" mode=""></image>
		<view class="content">
			<view class="titles">
				{{info.title}}
			</view>
			<view class="tips">
				{{info.content}}
			</view>
			<view class="bottom">
				<view class="price">
					<view class="pink">
						￥
					</view>
					<!-- 现价 -->
					<view class="big">
						{{info.presentPrice}}
					</view>
					<!-- 原价/价值 -->
					<view class="grey">
						￥{{info.originalPrice}}
					</view>
					<view class="grey">
						已售: {{info.sold}}
					</view>
				</view>
				<!-- u-button 阻止默认事件冒泡失败 所以绑定在 父级盒子上面 -->
				<view class="btn" @click.stop="subscribe"> 
					<u-button text="立即预约" color="#FD4080" size="small"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shop-card",
		props: {
			info: {
				type: Object,
				required: true,
			}
		},
		data() {
			return {};
		},
		methods: {
			subscribe() {
				this.$emit("subscribe-btn", this.info);
			},
			getInfo() {
				this.$emit("click", this.info);
			},
		}
	}
</script>

<style>
	.card {
		margin-bottom: 20rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.card image {
		width: 100%;
		height: 230rpx;
		display: inline-block;
	}

	.card .content {
		padding: 30rpx;
	}

	.content .titles {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.content .tips {
		font-size: 24rpx;
		color: #aaa;
		margin-bottom: 10rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom .price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #D6D6D6;
	}

	.price .grey {
		font-size: 24rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	.price .grey+.grey {
		margin-left: 30rpx;
		text-decoration: unset;
	}

	.price .pink {
		font-size: 28rpx;
		color: #FD4080;
	}

	.price .big {
		font-size: 44rpx;
		color: #FD4080;
	}
</style>
